<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="86px"
      class="demo-ruleForm"
      v-if="flag"
    >
      <el-form-item label="自提点名称:" prop="addrName"  style="width: 415px;">
        <el-input v-model="ruleForm.addrName" clearable placeholder="请输入 自提点名称"></el-input>
      </el-form-item>
      <el-form-item label-width="100px">
        <el-button type="primary" @click="submitForm" size="mini"><i class="el-icon-search"></i> 搜索</el-button>
        <el-button @click="resetForm('ruleForm')" size="mini"><i class="el-icon-delete"></i> 清空</el-button>
      </el-form-item>
    </el-form>
    <div style="display: flex; justify-content: space-between;">
      <div>
        <el-button @click="xz" type="primary"  size="small"><i class="el-icon-plus"></i> 新增</el-button>
        <el-button type="danger" :disabled="dis" size="small"> 批量删除</el-button>
      </div>
      <div>
        <el-button @click="sx" icon="el-icon-refresh" circle></el-button>
        <el-button @click="xs" icon="el-icon-search" circle></el-button>
      </div>
    </div>
    <div>
      <el-tag style="height: 40px;">当前表格已选择 <span style="font-size: 16px; font-weight: 600;">{{ multipleSelection }}</span> 项<el-button style=" margin-left: 10px;" type="text" @click="toggleSelection()">清空</el-button></el-tag>
    </div>
    <template>
      <el-table
        ref="multipleTable"
        :data="tableData"
        border
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="自提点名称">
          <template slot-scope="scope">{{ scope.row.addrName }}</template>
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="手机号">
        </el-table-column>
        <el-table-column
          prop="province"
          label="省份"
          >
        </el-table-column>
        <el-table-column
          prop="city"
          label="城市"
          >
        </el-table-column>
        <el-table-column
          prop="area"
          label="区/县"
          >
        </el-table-column>
        <el-table-column
          prop="addr"
          label="地址"
          >
        </el-table-column>
        <el-table-column label="操作" width="350" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button
              size="small"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit"></i> 修改</el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"><i class="el-icon-delete"></i> 删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog title="新增" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rul" ref="form">
        <el-form-item label="名称" :label-width="formLabelWidth" prop="addrName">
          <el-input v-model="form.addrName" placeholder="自提点名称"></el-input>
        </el-form-item>
        <div style="height: 40px;">
          <el-col :span="9">
            <el-form-item label="省份" prop="province" :label-width="formLabelWidth">
              <el-select v-model="form.province" placeholder="请选择" @change="op">
                <el-option
                  v-for="item in options"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="" prop="city">
              <el-select v-model="form.city" placeholder="请选择"  @change="op1">
                <el-option
                  v-for="item in options1"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label=""  prop="area">
              <el-select v-model="form.area" placeholder="请选择">
                <el-option
                  v-for="item in options2"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </div>
        <el-form-item label="地址" :label-width="formLabelWidth" prop="addr">
          <el-input v-model="form.addr" placeholder="地址" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth" prop="mobile">
          <el-input v-model="form.mobile" placeholder="手机号" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="qx">取 消</el-button>
        <el-button type="primary" @click="qd('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    var validatePass = (rule, value, callback) => {
      let e = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      if (!e.test(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
        // callback 必须执行 不执行会报错
      }
    }
    return {
      ruleForm: {
        addrName: ''
      },
      rules: {},
      options: [],
      options1: [],
      options2: [],
      form: {
        addrName: '',
        province: '',
        city: '',
        area: '',
        addr: '',
        mobile: ''
      },
      multipleSelection: 0,
      total: 0,
      pid: 0,
      currentPage4: 1,
      page: {
        current: 1,
        size: 10
      },
      rul: {
        addrName: [
          { required: true, message: '自提点名称不能为空', trigger: 'blur' }
        ],
        province: [
          { required: true, message: '省份不能为空', trigger: 'change' }
        ],
        city: [
          { required: true, message: '城市不能为空', trigger: 'change' }
        ],
        area: [
          { required: true, message: '区/县不能为空', trigger: 'change' }
        ],
        addr: [
          { required: true, message: '地址不能为空', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ]
      },
      formLabelWidth: '80px',
      dialogFormVisible: false,
      flag: true,
      dis: true,
      tableData: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    xz () {
      this.dialogFormVisible = true
      this.t = new Date().getTime()
      this.pid = 0
      this.$http('apis/admin/area/listByPid', {
        params: {
          t: this.t,
          pid: this.pid
        }
      }).then((res) => {
        this.options = res.data
        console.log(this.options)
      })
    },
    op (val) {
      console.log(val)
      this.pid = val
      this.$http('apis/admin/area/listByPid', {
        params: {
          t: this.t,
          pid: this.pid
        }
      }).then((res) => {
        this.options1 = res.data
        console.log(this.options)
      })
    },
    op1 (val) {
      console.log(val)
      this.pid = val
      this.$http('apis/admin/area/listByPid', {
        params: {
          t: this.t,
          pid: this.pid
        }
      }).then((res) => {
        this.options2 = res.data
        console.log(this.options)
      })
    },
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      console.log(index, row)
    },
    toggleSelection () {
      this.$refs.multipleTable.clearSelection()
    },
    submitForm () {
      this.page.addrName = this.ruleForm.addrName
      this.getList()
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.page.size = val
      console.log(this.page.size)
      this.getList()
    },
    handleSelectionChange (val) {
      this.multipleSelection = val.length
      console.log(this.multipleSelection)
      if (this.multipleSelection !== 0) {
        this.dis = false
      } else {
        this.dis = true
      }
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.page.current = val
      this.getList()
    },
    qx () {
      this.dialogFormVisible = false
    },
    qd (formName) {
      this.form.t = new Date().getTime()
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false
        } else {
          return false
        }
      })
    },
    sx () {
      this.page.addrName = ''
      this.getList()
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    xs () {
      if (this.flag === true) {
        this.flag = false
      } else {
        this.flag = true
      }
    },
    getList () {
      this.page.t = new Date().getTime()
      this.$http('apis/shop/pickAddr/page', {
        params: {
          size: this.page.size,
          current: this.page.current,
          addrName: this.page.addrName
        }
      }).then((res) => {
        console.log(res.data.records)
        this.tableData = res.data.records
        this.total = res.data.total
      })
    }
  }
}
</script>

<style scoped>
.demo-ruleForm{
  display: flex;
}
>>>.el-input__inner{
  height: 32px;
  line-height: 32px;
}
.el-form-item{
  margin-bottom: 14px;
}
>>>.el-table th{
  background-color: #fafafa;
  text-align: center;
  padding: 8px 0;
  font-size: 12px;
  color: rgba(0, 0, 0, .85);
}
>>>.el-table td{
  text-align: center;
  padding: 8px 0;
  font-size: 12px;
}
</style>